<template>
	<view class="content">
		<bgyx-nav-bar name="通讯录">
			<view style="display: flex;align-items: center;">
				<zb-popover placement="bottom-end" :options="actions" ref="Popover"  @select="csitemfunc"
					class="item-popover">
					<image src="/static/images/addmn.png" style="width: 50rpx;height: 50rpx;margin-right: 15rpx;" mode=""></image>
				</zb-popover>
			</view>
		</bgyx-nav-bar>
		
		<view class="indexcontent" @click="clkcon" style="overflow-y: hidden;">
			<view style="width: 100%;display: flex;padding: 15rpx;justify-content: space-between;">
				<view @click="goAddFriend" style="display: flex;flex-direction: column;align-items: center;">
					<view style="width: 100rpx;height: 100rpx;display: flex;align-items: center;justify-content: center;border-radius: 80rpx;background: linear-gradient(45deg,#adf1f7,#90dff7);flex-direction: column;">
						<image src="/static/images/addfrd.png" style="width: 70rpx;height: 70rpx;" mode=""></image>
					</view>
					<view style="margin-top: 6rpx;font-size: 28rpx;">
						添加好友
					</view>
				</view>
				
				<view @click="goApply" style="display: flex;flex-direction: column;align-items: center;">
					<view style="width: 100rpx;height: 100rpx;display: flex;align-items: center;justify-content: center;border-radius: 80rpx;background: linear-gradient(45deg,#f7ee8a,#f7c470);flex-direction: column;">
						<view style="position: relative;">
							<u-badge :offset="[-15,-15]" type="error" :count="$store.state.tabbar.list[1].count"></u-badge>
							<image src="/static/images/frdrp.png" style="width: 70rpx;height: 70rpx;" mode=""></image>
						</view>
					</view>
					<view style="margin-top: 6rpx;font-size: 28rpx;">
						好友申请
					</view>
				</view>
				
				<view @click="gomakegroup" style="display: flex;flex-direction: column;align-items: center;">
					<view style="width: 100rpx;height: 100rpx;display: flex;align-items: center;justify-content: center;border-radius: 80rpx;background: linear-gradient(45deg,#f7b697,#f79f85);flex-direction: column;">
						<image src="/static/images/makegrp.png" style="width: 70rpx;height: 70rpx;" mode=""></image>
					</view>
					<view style="margin-top: 6rpx;font-size: 28rpx;">
						新建群聊
					</view>
				</view>
				
				<view @click="gohmd" style="display: flex;flex-direction: column;align-items: center;">
					<view style="width: 100rpx;height: 100rpx;display: flex;align-items: center;justify-content: center;border-radius: 80rpx;background: linear-gradient(45deg,#d6c7f7,#abb0f7);flex-direction: column;">
						<image src="/static/images/frdhmd.png" style="width: 70rpx;height: 70rpx;" mode=""></image>
					</view>
					<view style="margin-top: 6rpx;font-size: 28rpx;">
						黑名单
					</view>
				</view>
			</view>
			
			<scroll-view style="width: 100%;flex: 1;overflow-y: auto;flex-direction: column;" scroll-y :scroll-into-view="scrollTop">
				<view v-for="(item, index) in list" :key="index">
					<view style="margin: 15rpx;" :id="item.letter">
						{{item.letter}}
					</view>
					<view style="width: 100%;display: flex;flex-direction: column;">
						<view @click="godetail(itemx)" v-for="(itemx,ain) in item.list" class="list-cell" style="padding: 15rpx;">
							<view style="display: flex;align-items: center;">
								<u-avatar mode="square" size="80" :src="$store.state.common.systemInfo.fileurl + 'avatar/' + itemx.fid + '.jpg'"></u-avatar>
								<view style="margin-left: 10rpx;display: flex;flex-direction: column;justify-content: center;">
									<view style="font-size: 30rpx;">
										{{itemx.name}}
									</view>
									<view v-if="itemx.note" style="color: #a6a6a6;font-size: 24rpx;">
										{{itemx.note}}
									</view>
								</view>
							</view>
							<view class="">
								
							</view>
						</view>
					</view>
				</view>
				<view style="position: fixed;right: 20rpx;top: 25%;display: flex;flex-direction: column;align-items: center;font-size: 24rpx;">
					<view v-for="(item, index) in list" :key="index">
						<view @click="scrollTop = item.letter" class="" :id="item.letter">
							{{item.letter}}
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
		
		<bgyx-tab-bar />
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex';
	export default {
		data() {
			return {
				scrollTop: '',
				actions: [{
						text: '添加好友',
						icon:"/static/images/adduserw.png"
					},
					{
						text: '新建群聊',
						icon:"/static/images/addgroupw.png"
					},
					{
						text: '扫一扫',
						icon:"/static/images/scanw.png"
					},
				]
			}
		},
		onShow() {
			if(this.$store.state.friend.list.length == 0){
				this.$store.dispatch({
					type:"friend/init",
					payload:{}
				})
			}
			// #ifdef H5
			this.actions = [{
					text: '添加好友',
					icon:"/static/images/adduserw.png"
				},
				{
					text: '新建群聊',
					icon:"/static/images/addgroupw.png"
				}
			]
			// #endif
		},
		computed: {
			...mapState({
				list: (state) => {
					const ulist = state.friend.list.filter(e=>e.gid == 0 && e.status == "正常").sort((a,b)=>(a.letter).localeCompare(b.letter))
					const ilist = {}
					for(let o of ulist){
						if(ilist[o.letter]){
							ilist[o.letter].push(o)
						}else{
							ilist[o.letter] = [o]
						}
					}
					const datalist = []
					for(let k in ilist){
						datalist.push({
							letter:k,
							list:ilist[k]
						})
					}
					return datalist
				}
			})
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
		},
		methods:{
			gohmd:async function(){
				uni.navigateTo({
					url:"/pages/friend/hmdlist"
				})
			},
			csitemfunc: async function(e) {
				console.log(e)
				if(e.text == "添加好友"){
					uni.navigateTo({
						url:"/pages/friend/addfriend"
					})
				}
				
				if(e.text == "新建群聊"){
					uni.navigateTo({
						url:"/pages/friend/makegroup"
					})
				}
			},
			gomakegroup:function(){
				uni.navigateTo({
					url:"/pages/friend/makegroup"
				})
			},
			goAddFriend:function(){
				uni.navigateTo({
					url:"/pages/friend/addfriend"
				})
			},
			goApply:function(){
				uni.navigateTo({
					url:"/pages/friend/applylist"
				})
			},
			godetail:function(item){
				uni.navigateTo({
					url:"/pages/friend/detail?id="+item.fid
				})
			},
			clkcon:function(){
				this.$refs.Popover.close()
			}
		}
	}
</script>


<style scoped>
	
	page{
		background: linear-gradient(to bottom,#e8eaf0,#eff0fb);
	}
	
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		width: 100%;
		height: 100vh;
		overflow-y: hidden;
		padding-bottom: 120rpx;
		border-start-end-radius: 32rpx;
		border-start-start-radius: 32rpx;
	}
	
	.list-cell {
		display: flex;
		box-sizing: border-box;
		width: 100%;
		padding: 10rpx 14rpx;
		overflow: hidden;
		color: #323233;
		font-size: 14px;
		background-color: #fff;
		border-bottom: 1rpx solid #f1f1f199;
		justify-content: space-between;
		align-items: center;
	}
</style>